<template>
  <div class="exchange">
 <div class="header">
      <el-page-header @back="goBack" content="红包兑换"> </el-page-header>
    </div>
    <div class="inp">
      <div class="inpOne">
        <input type="text" placeholder="请输入兑换码" v-model="exchangeV" /><br />
      </div>
      <div class="inpOne">
        <input type="text" placeholder="验证码" v-model="codeV" />
        <img :src="code && code" @click="getCode" alt="" />
        <div class="changeImg">
          <p>看不清</p>
          <span class="changeOne" @click="getCode">换一张</span>
        </div>
      </div>
    </div>
    <button @click="exchange" class="btn">兑换</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
name:'exchange',
data(){
    return{
        exchangeV:"",
        codeV:"",
        code:""
    }
},
created(){
   this.getCode()
},
methods:{
    //返回上一頁
    goBack() {
      this.$router.back();
    },
     getCode() {
    let api = this.eleUrl.yzcode;
      this.$http({
        url: api,
        method: "post",
        //用于用户代码是否应该在请求情况下，向其他域发送cookie，不使用缓存数据
        //主要用于验证码
        withCredentials: true,
        data: {},
      }).then((res) => {
        //console.log(res.data)
        this.code = res.data.code;
      });
    },
    // 兑换
    exchange(){
        let api=this.eleUrl.exchange+this.userLoginMsg.id+"/hongbao/exchange";
        this.$http({
            url:api,
            method:"post",
         data: {
             user_id:this.userLoginMsg.id,
             exchange_code :this.exchangeV,
             captcha_code :this.codeV
         },
        }).then((res)=>{
            alert(res.data.message)
            console.log(res.data)
        })
    }

},
  computed: {
    ...mapState(["eleUrl","userLoginMsg"]),
  },
}
</script>

<style scoped>
.exchange {
    font-size: .15rem;
  background-color: #f6f6f6;
}
.header >>>.el-page-header__content{
    color: white;
    font-weight: 500;
    margin-left: .7rem;
}
.header >>> .el-page-header {
  color: white;
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  background-color: rgb(80, 143, 238);
}

/* 输入框 */
.inp {
  margin-top: .15rem;
  background-color: #fff;
}
.inpOne {
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  border-bottom: 1px solid #ddd;
}
.inpOne img {
  vertical-align: middle;
}
.inp input {
  border: none;
  outline: none;
  font-size: .16rem;
  margin-left: .1rem;
}
.switch {
  margin-left: 1rem;
}
.changeImg {
  width: .5rem;
  height: .5rem;
  float: right;
  font-size: .1rem;
  line-height: .25rem;
  text-align: center;
}
.changeOne {
  color: #4a90e6;
}
/* 温馨提示 */
.tips{
    font-size: .14rem;
    color: rgb(211, 68, 68);
}
.tips>p{
    margin: .1rem;
}
/* 登录按钮 */
.btn{
    width: 96%;
    height: .4rem;
    display: block;
    margin: 0 auto;
    border: none;
    color: white;
    font-size: .16rem;
    background-color: #67D96A;
    border-radius: 5px;
}
/* 重置密码 */
.reset{
    text-align: right;
    color: #4a90e6;
    margin-top: .2rem;
}
</style>